<template>
  <div class="bg">
    <!-- <video src="https://slwl-admin.itheima.net/static/media/video.3cf57b17.mp4" autoplay="autoplay" loop="loop" muted="muted" style="width:100%" height="100%" /> -->
    <video autoplay loop muted>
      <source src="https://slwl-admin.itheima.net/static/media/video.3cf57b17.mp4" type="video/mp4">
    </video>
    <div class="login">
      <div class="title-container">
        <img src="https://slwl-admin.itheima.net/static/img/logo1.33ef7fa0.png" alt="">
      </div>
      <!--登录表单-->

      <!-- el-form > el-form-item > el-input -->
      <el-form ref="form" :model="loginForm" :rules="rules">
        <el-form-item prop="mobile">
          <div>
            <el-input v-model="loginForm.mobile" placeholder="账号" prefix-icon="el-icon-s-custom" />
          </div>
        </el-form-item>

        <el-form-item prop="password">
          <el-input v-model="loginForm.password" type="password" placeholder="密码" prefix-icon="el-icon-unlock" />
        </el-form-item>

        <el-form-item prop="yanzheng">
          <el-input v-model="loginForm.yanzheng" type="text" placeholder="验证码" prefix-icon="el-icon-s-claim" />
          <img :src="img" class="code-image" @click="getNum">
        </el-form-item>

        <el-form-item>
          <el-button type="primary" class="login-button" @click="login">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { number } from '@/api/user'

export default {
  name: 'Login',
  data() {
    return {
      key: '',
      img: '',
      loginForm: {
        mobile: process.env.NODE_ENV === 'production' ? '' : 'shenlingadmin',
        password: process.env.NODE_ENV === 'production' ? '' : '123456'
      },
      rules: {
        mobile: [
          { required: true, message: '不能为空', trigger: 'blur' },
          { message: '手机号格式不正确', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '不能为空', trigger: 'blur' },
          { min: 6, max: 16, message: '密码长度应该为6-16位之间', trigger: 'blur' }
        ],
        yanzheng: [
          // 自定义校验函数
          { validator: (rule, value, callback) => {
            // rules当前的校验规则
            // value是当前要校验的值
            // 如果通过校验 :callback()
            // 如果不通过校验 :callback(new Error('错误说明))
            // console.log(rule, value, callback)
            value ? callback() : callback(new Error('请先输入验证码'))
          }, trigger: 'change' }
        ]
      }
    }
  },
  async created() {
    this.getNum()
  },
  methods: {
    login() {
      // 表单校验
      this.$refs.form.validate((valid) => {
        valid && this.sendLogin()
      })
    },
    sendLogin() {
      // 调用vuex中的actions
      this.$store.dispatch('user/login', {
        account: this.loginForm.mobile,
        password: this.loginForm.password,
        tenant: '',
        bindAccount: '',
        bindPassword: '',
        signAccount: '',
        signPassword: '',
        code: this.loginForm.yanzheng,
        key: this.key
      })
      // 跳转主页
      this.$router.push('/dashboard')
    },
    // 获取验证码
    async getNum() {
      const key = this.randoms()
      this.key = key
      const res = await number(key)
      // console.log(res)
      this.img = URL.createObjectURL(res.data)
    },
    // 获取一个随机数
    randoms() {
      const str = 'abcdefg1234567890'
      let key = ''
      for (let j = 0; j < 37; j++) {
        key += str.charAt(Math.floor(Math.random() * str.length))
      }
      // console.log(key)
      return key
    }

  }

}
</script>

<style lang="scss" scoped>
.bg{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;

source {
  min-width: 100%;
  min-height: 100%;
  height: auto;
  width: auto;
}

video {
  object-fit:cover;
  position: fixed;
  right: 0px;
  bottom: 0px;
  min-width: 100%;
  max-height: 100%;
  height: auto;
  width: auto;
  background-size: cover;
  z-index:-11;
}
// 验证码定位
  .code-image{
    display: inline-block;
    vertical-align: top;
    width: 71px;
    height: 32px;
    cursor: pointer;
    margin-left: 10px;
    position: absolute;
    right: 15px;
    top: 3px;
  }

  .login{
  width: 450px;
  height: 490px;
  background-color: white;
  border-radius: 10px;
  padding: 36px 40px;

  .title-container{
    margin-bottom: 28px;
    position: relative;
    text-align: center;
    img{
      height: 54px;
    }
  }

   .el-input {
      width: 370px;
      height: 50px;
    }

   .login-button{
    width: 100%;
    height: 54px;
    margin-bottom: 14px;
    margin-top: 22px;
    background-color: #e15536;
    border: 0;
    font-size: 18px;
    color: #fff;
    font-weight: 700;
   }

  }

}
</style>
